<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<style>
			ul {
				display: flex;
				justify-content: space-around;
			}

			li {
				float: left;
				display: inline;
				margin-top: 5px;
				cursor: pointer;
			}

			.p {
				text-align: center;
				font-size: 5px;
				color: #666666;
			}

			/* 入口主题 */
			.list1 img {
				width: 50px;
				height: 30px;
				border-radius: 8px;
			}

			/* 热门主题 */
			.list2 img {
				width: 170px;
				height: 40px;
				border-radius: 8px;
			}

			/* 导航 */
			.list3 img {
				width: 60px;
				height: 40px;
				border-radius: 10px;
			}

			.p1 {
				float: left;
				display: inline;
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: #009F95;
				background-image: url(image/1.png);
			}

			.layui-tab-title {
				position: unset;
			}

			.layui-tab-title li {
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-image: url(image/1.png);
				padding: unset;
			}

			.navDiv {
				position: fixed;
				bottom: 0;
				right: 0;
				left: 0;
				bottom: 0;
				justifyContent: 'center';
				flexDirection: 'row';
				background-color: #40AFFE;
				height: 60px;
			}

			.navDiv .p {
				color: #00FF00;
			}

			.newsDiv {
				height: 70px;
				margin-bottom: 5px;
			}

			.news-pic {
				width: 20%;
				float: left;
				height: 70px;
				margin-left: 5px;
			}

			.news-content {
				width: 75%;
				float: left;
				background-color: #009F95;
				height: 70px;
				margin-left: 5px;
				padding-left: 5px;
			}

			.news-content-title {
				color: #000000;
				font-size: 16px;
			}

			.news-content-body {
				color: #555555;
				font-size: 13px;
			}

			.news-pic img {
				width: 100%;
				height: 70px;
			}

			.active {
				background-color: #009688;
				border-radius: 18px;
			}
		</style>
	</head>
	<body>

		<!--搜索框-->
		<form class="layui-form">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item" style="margin-bottom: 5px;">
				<div class="layui-input-block" style="margin-left: 5px;margin-top: 5px;">
					<input type="text" name="title" autocomplete="off" class="layui-input"
						style="width:70% ;display: inline-block;border: 1px #009F95 solid;">
					<button id="search-btn" class="layui-btn" lay-submit lay-filter="formDemo"
						style="margin-top: -5px;width: 25%;border-radius: 10px;">搜索</button>
				</div>
			</div>
		</form>
		<!-- 轮播图 -->
		<div class="layui-carousel" id="test1" lay-filter="test1">
			<div id="carousel-img" carousel-item>
<!--				<a href="carousel-content.html"-->
<!--					style="background: url(image/1.png) no-repeat;background-size:100% 100%;"></a>-->
<!--				<a href="carousel-content.html"-->
<!--					style="background: url(image/2.png) no-repeat;background-size:100% 100%;"></a>-->
<!--				<a href="carousel-content.html"-->
<!--					style="background: url(image/3.png) no-repeat;background-size:100% 100%;"></a>-->
<!--				<a href="carousel-content.html"-->
<!--					style="background: url(image/4.png) no-repeat;background-size:100% 100%;"></a>-->
<!--				<a href="carousel-content.html"-->
<!--					style="background: url(image/5.png) no-repeat;background-size:100% 100%;"></a>-->
			</div>
		</div>
		<!-- 智慧城市图文混排 -->
		<div class="zhDiv">
			<div >
				<ul class="list1">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">智慧巴士</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">服务网点</div>
					</li>
					<li>
						<img src="image/3.png" align="bottom">
						<div class="p">入口3</div>
					</li>
					<li>
						<img src="image/4.png" align="bottom">
						<div class="p">入口4</div>
					</li>
					<li>
						<img src="image/5.png" align="bottom">
						<div class="p">入口5</div>
					</li>
				</ul>
			</div>
			<div >
				<ul class="list1">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">入口1</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">入口2</div>
					</li>
					<li>
						<img src="image/3.png" align="bottom">
						<div class="p">入口3</div>
					</li>
					<li>
						<img src="image/4.png" align="bottom">
						<div class="p">入口4</div>
					</li>
					<li>
						<img src="image/5.png" align="bottom">
						<div class="p">更多</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 热门主题图文混排 -->

		<div class="rmDiv">
			<div id="div_img2">
				<ul class="list2">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">热门主题1</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">热门主题2</div>
					</li>

				</ul>
			</div>
		</div>

		<!-- 新闻主题模块 -->
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">新闻分类1</li>
				<li>新闻分类2</li>
				<li>新闻分类3</li>
				<li>新闻分类4</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<div class="newsDiv">
						<div class="news-pic"><img src="image/1.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题1</div>
							<div class="news-content-body">新闻内容1</div>
						</div>
					</div>
					<div class="newsDiv">
						<div class="news-pic"><img src="image/2.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题12</div>
							<div class="news-content-body">新闻内容12</div>
						</div>
					</div>

				</div>
				<div class="layui-tab-item">
					<div class="newsDiv">
						<div class="news-pic"><img src="image/2.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题2</div>
							<div class="news-content-body">新闻内容2</div>
						</div>
					</div>
					<div class="newsDiv">
						<div class="news-pic"><img src="image/3.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题21</div>
							<div class="news-content-body">新闻内容22</div>
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="newsDiv">
						<div class="news-pic"><img src="image/3.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题31</div>
							<div class="news-content-body">新闻内容31</div>
						</div>
					</div>
					<div class="newsDiv">
						<div class="news-pic"><img src="image/4.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题32</div>
							<div class="news-content-body">新闻内容32</div>
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<div class="newsDiv">
						<div class="news-pic"><img src="image/4.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题41</div>
							<div class="news-content-body">新闻内容41</div>
						</div>
					</div>
					<div class="newsDiv">
						<div class="news-pic"><img src="image/5.png" /></div>
						<div class="news-content">
							<div class="news-content-title">新闻标题42</div>
							<div class="news-content-body">新闻内容42</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 智慧城市图文混排 -->
		<div class="navDiv">
			<div id="div_img1">
				<ul class="list3">
					<li>
						<img src="image/1.png" align="bottom">
						<div class="p">首页</div>
					</li>
					<li>
						<img src="image/2.png" align="bottom">
						<div class="p">全部服务</div>
					</li>
					<li>
						<img src="image/3.png" align="bottom">
						<div class="p">精准扶贫</div>
					</li>
					<li>
						<img src="image/4.png" align="bottom">
						<div class="p">新闻</div>
					</li>
					<li>
						<img src="image/5.png" align="bottom">
						<div class="p">个人中心</div>
					</li>
				</ul>
			</div>
		</div>


		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>

		<script>
			$(function() {
				// 轮播获取图片
				$.ajax({
					url: baseUrl+"index/list.json",
					contentType: "json",
					success: function(data) {
						if (data.code == "200") {
							var images = data.pageInfo.list;
							images.forEach(function(img) {
								var imgStr = img.name.replace(/\\/g,"/");

								var aStr =
									'<a href="carousel-content.html" style="background: url(';
								aStr+=tUrl+unescape(imgStr);
								aStr+= ') no-repeat;background-size:100% 100%;"></a>';
								$("#carousel-img").append(aStr);
								carouseLoad();
							});

						}
					}
				})

				// 服务入口点击事件
				$(".list1 li:first").on("click", function() {
					window.location.href = "bus-list.html";
				});
				$(".list1 li:eq(1)").on("click", function() {
					window.location.href = "service-network-list.html";
				});

				// $(".list1 li").not(":first").on("click", function() {
				// 	window.location.href = "rk-content.html";
				// });

				// 热门主题点击事件
				$(".list2 li").on("click", function() {
					window.location.href = "rm-content.html";
				});

				// 新闻点击事件
				$(".newsDiv").on("click", function() {
					window.location.href = "news-content.html";
				});


				// 导航滑动效果
				$(".list3 li").hover(
					function() {
						$(this).addClass("active");
					},
					function() {
						$(this).removeClass("active");
					}
				);

				//导航点击事件
				$(".list3 li").on("click", function() {
					var index = $(".list3 li").index(this);
					if (index > 0) {
						switch (index) {
							case 1:
								window.location.href = "all-service.html";
								break;
							case 2:
								window.location.href = "fp.html";
								break;
							case 3:
								window.location.href = "news-content.html";
								break;
							case 4:
								window.location.href = "personal-center.html";
								break;
						}
					}
				});

				function carouseLoad(){
					// layui 轮播效果
					layui.use(['carousel', 'form'], function() {
						var carousel = layui.carousel;
						var form = layui.form;
						layer = layui.layer;
						//建造实例
						ins = carousel.render({
							elem: '#test1',
							full: false,
							width: '100%',
							height: '150px',
							autoplay: false,
							trigger: 'mouseover',
							arrow: 'none' //始终显示箭头
							//,anim: 'updown' //切换动画方式
						});

						//表单提交
						form.on('submit(formDemo)', function(data) {
							window.location.href = "news-content.html";
							return false;
						});
					});

					$("#test1").on("touchstart", function(e) {
						var startX = e.originalEvent.targetTouches[0].pageX; //开始坐标X
						$(this).on('touchmove', function(e) {
							arguments[0].preventDefault(); //阻止手机浏览器默认事件
						});
						$(this).on('touchend', function(e) {
							var endX = e.originalEvent.changedTouches[0].pageX; //结束坐标X
							e.stopPropagation(); //停止DOM事件逐层往上传播
							if (endX - startX > 30) {
								ins.slide("sub");
							} else if (startX - endX > 30) {
								ins.slide("add");
							}
							$(this).off('touchmove touchend');
						});
					});
				}



			});



		</script>
	</body>
</html>
